import React, { Component } from 'react';

/*
  学习目标：使用props设置默认值
  */
import PropTypes from 'prop-types';
export default class App extends Component {
  render() {
    return (
      <div>
        <Child></Child>
        <Child2></Child2>
      </div>
    );
  }
}

function Child2({ msg }) {
  return (
    <div>
      Child2
      <h1>{msg}</h1>
    </div>
  );
}
// 函数式组件和类组件设置props校验，用法一模一样
Child2.propTypes = {
  msg: PropTypes.string,
};
Child2.defaultProps = {
  msg: 'Hello Child2',
};

class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>Child</h1>
        <h2>{this.props.msg}</h2>
        <h3>{this.props.count}</h3>
      </div>
    );
  }
}

// 🔔defaultProps的作用设置给props设置默认值
// defaultProps是固定的属性名称，要写死，
Child.defaultProps = {
  msg: 'hello React',
  count: 71,
};

Child.propTypes = {
  msg: PropTypes.string.isRequired,
};
